<template>
  <div class="full-right">
    <div class="full-right-table">
      <div class="full-right-table-title">
        {{ table.title }}
      </div>
      <dv-scroll-board
        :config="tableData.data"
        style="width:100%;height:90%"
        @click="openDialg"
      />
    </div>
    <div class="full-right-chart">
      <div class="full-right-chart-title">
        {{ echarts.title }}
      </div>
      <VEcharts
        autoresize
        :options="echartsData.options"
        style="width: 100%; height: 90%"
      />
    </div>
    <a-modal
      :visible="dbclickVisible"
      title="项目资金监管台账"
      width="90vw"
      class="dbclickModal"
      :body-style="{ height: '450px' }"
      cancel-text="取消"
      ok-text="确定"
      @ok="dbclickOk"
      @cancel="dbclickCancel"
    >
      <!-- <table-common :menu-id="menuId" :filter-list="leftFilterList" /> -->
      <div class="table1Modal">
        <table1 :table1="tableList1" :headers-list="tableHeaderData.list1" />
      </div>
      <template slot="footer">
        <span style="color:#0a1c37">1</span>
      </template>
    </a-modal>
  </div>
</template>

<script>
import _ from 'lodash';
import table1 from './tabble/table';
import VEcharts from '@/components/vecharts';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
export default {
  components: {
    VEcharts,
    table1
  },
  props: {
    echarts: {
      type: Object,
      default: () => []
    },
    table: {
      type: Object,
      default: () => ({})
    },
    table1: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dbclickVisible: false,
      echartsData: {},
      tableList1: [],
      tableHeaderData: {
        list1: {
          // topleft
          header: true,
          height: '400',
          data: [
            {
              ZD: 'PROGRAMNAME2',
              label: '项目名称'
            },
            {
              ZD: 'TITLE',
              label: '文件名称'
            },
            {
              ZD: 'WJYJ_WH',
              label: '文号'
            },
            {
              ZD: 'EJXMJE',
              label: '补助金额'
            },

            {
              ZD: 'DEPARTMENTNAME',
              label: '类别'
            },
            {
              title: '信息通达',
              data: [
                {
                  ZD: 'FILEDATE',
                  label: '发文日期'
                },
                {
                  ZD: 'RECIVEDATE',
                  label: '收到日期'
                },
                {
                  ZD: 'DPLANDATE',
                  label: '资金入账信息'
                },
                {
                  ZD: 'ZJBRDYPZH',
                  label: '资金拨入对应凭证号'
                },
                {
                  ZD: 'PAYDATE',
                  label: '资金拨付信息'
                },
                {
                  ZD: 'ZJBFDYPZH',
                  label: '资金拨付对应凭证号'
                }
              ]
            },
            {
              title: '公开公示',
              data: [
                {
                  ZD: 'GGFS',
                  label: '公开形式'
                },
                {
                  ZD: 'START_DATE',
                  label: '公开日期'
                }
              ]
            },
            {
              title: '巡查抽查',

              data: [
                {
                  ZD: 'CHECK_DATE',
                  label: '巡查日期'
                },
                {
                  ZD: 'CHECK_USER',
                  label: '巡查人员'
                },
                {
                  ZD: 'SUBSIDYCONTENT',
                  label: '巡查评价'
                },
                {
                  ZD: 'XCQZDH',
                  label: '巡查签证单号'
                }
              ]
            },
            {
              ZD: 'IFILES',
              label: '附件张数'
            }
          ]
        }
      }
    };
  },
  computed: {
    tableData() {
      const data = _.cloneDeep(this.table);
      // const tableData = data.data && data.data.data;
      // tableData && tableData.length && tableData.forEach(i => {
      //   i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
      //   i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
      //   // if (i[3] === '低风险') {
      //   //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
      //   // } else if (i[3] === '中风险') {
      //   //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
      //   // } else if (i[3] === '高风险') {
      //   //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
      //   // }
      //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
      // });
      return data;
    }
  },
  created() {
    this.getEchartsData();
  },
  methods: {
    getEchartsData() {
      const data = _.cloneDeep(this.echarts);
      getQueryBodyByProduce({
        pageIndex: 0,
        pageSize: 100,
        tableId: 1024,
        pageType: 1
      }).then(res => {
        if (res.success && res.data.length) {
          const arr = [];
          res.data.forEach(item => {
            arr.push({
              value: item.GS,
              name: item.FXLX
            });
          });
          data.options.series[0].data = arr;
          this.echartsData = data;
        }
      });
    },
    dbclickCancel() {
      this.dbclickVisible = false;
    },
    dbclickOk() {
      this.dbclickVisible = false;
    },
    openDialg({ row }) {
      if (row[0] === '齐贤街道') {
        this.dbclickVisible = true;
        getQueryBodyByProduce({
          pageIndex: 0,
          pageSize: 100,
          tableId: 824,
          pageType: 1
        }).then(res => {
          if (res.success && res.data.length) {
            this.tableList1 = res.data;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.full-right {
  padding: 20px;
  font-size: 18px;
  .full-right-table {
    background-image: url("~@/assets/images/fullscreen/xmlx.png");
    background-size: 100% 100%;
    padding: 10px;
    height: 55%;
    .full-right-table-title {
      height: 10%;
      color: #1fd2ff;
      padding-left: 20px;
    }
    .dv-scroll-board {
      color: #1fd2ff;
    }
  }
  .full-right-chart {
    margin-top: 10px;
    background-image: url("~@/assets/images/fullscreen/xmlx.png");
    background-size: 100% 100%;
    padding: 10px;
    height: calc(45% - 10px);
    .full-right-chart-title {
      height: 10%;
      color: #1fd2ff;
      padding-left: 20px;
    }
  }
}
.dbclickModal /deep/.ant-modal .ant-modal-content {
  background: #0a1c37;
}
.dbclickModal /deep/.ant-modal-header {
  background: #0a1c37;
}
.dbclickModal /deep/.ant-modal-title {
  color: #f6bd16;
}

.dbclickModal /deep/.ant-modal-header {
  border-color: #143c6e;
}
.dbclickModal /deep/.ant-modal-footer {
  border-color: #143c6e;
}
.dbclickModal /deep/.ant-modal-close-x {
  color: #f6bd16;
}
</style>
